import React, { Component } from 'react';
import {
    View,
    Image,
    StyleSheet
} from 'react-native';
import { Password, Label } from 'iftide';


export default class Basic2 extends Component{
    constructor(props) {
        super(props);
        this.state = {
            showErrorInfo : false,
            errorInfo : ''
        }
    }

    _focus(){
        console.log('11');
    }

    _onPress(){
        this.setState({
            showErrorInfo:true,
            errorInfo : "密码错误"
        })
    }


    render() {
        const img = require('./Icon.png');

        return (
            <View style={{flex:1}}>

                <View style={styles.container}>
                    <Label text = '掩码密码框 - 样式二' fontWeight={'bold'} textDecorationLine={'underline'} onPress={()=>this._onPress()} />
                </View>
                <View style={styles.item}>
                    <Password hasTopBorder={true} isMerge={true} leftIcon={img} placeholder="请输入原密码" onFocus={()=>this._focus()} showErrorInfo={this.state.showErrorInfo} errorInfo={this.state.errorInfo}/>
                </View>
                <View style={styles.item}>
                    <Password isMerge={true} leftIcon={img} placeholder="请输入新密码" secureTextEntry={true} />
                </View>
                <View style={styles.item}>
                    <Password isMerge={false} leftIcon={img} placeholder="请输入6-20位字母、数字密码" secureTextEntry={true} />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 13,
        paddingVertical: 8,
        backgroundColor: '#F5F7F9',
    },
    item : {
        flexDirection: 'row',
    }
});